<template>
  <div>
    <!--我的功能-->
    <div class="div1">
      <p>我的功能</p>
      <div class="tion" v-for="(item,index) in gongneng" :key="index">
        <div @click="goto(0)">
          <div><img :src="item.img"></div>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <!--我的服务-->
    <div class="div2">
      <p>我的服务</p>
      <div class="tion" v-for="(item,index) in fuwu" :key="index">
        <div>
          <div><img :src="item.img"></div>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <!--更多推荐-->
    <div class="div3">
      <p>更多推荐</p>
      <div class="tion" v-for="(item,index) in gengduo" :key="index">
        <div>
          <div><img :src="item.img"></div>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Function",
  data(){
    return{
      gongneng:[],
      fuwu:[],
      gengduo:[]
    }
  },
  mounted() {
    this.$axios.get('/function').then( (result)=>{
      // console.log(result.data)
      this.gongneng=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/fuwu').then( (result)=>{
      // console.log(result.data)
      this.fuwu=result.data
    }).catch(function (err){
      // console.log(err)
    })
    this.$axios.get('/recommend').then( (result)=>{
      // console.log(result.data)
      this.gengduo=result.data
    }).catch(function (err){
      // console.log(err)
    })
  }
}
</script>

<style scoped>
  .div1{
    background-color: #f8f7f7;
    border-radius: 10px;
    height: 270px;
    padding-top: 3px;
    margin-bottom: 10px;
  }
  .div2{
    height: 120px;
    background-color: #f8f7f7;
    border-radius: 10px;
    padding-top: 3px;
    margin-bottom: 10px;
  }
  .div3{
    background-color: #f8f7f7;
    border-radius: 10px;
    height: 200px;
    margin-bottom: 60px;
    padding-top: 3px;
    margin-bottom: 60px;
  }
  .tion{
    list-style: none;
    position: relative;
    display: flex;
    float: left;
    font-size: 10px;
    padding-bottom: 15px;
    width: 25%;
    justify-content: space-around;
  }
  img{
    width: 40px;
    height: 40px;
    border-radius: 50px;
  }
  p{
    font-family: 幼圆;
    font-weight: bold;
  }
</style>
